import React from 'react';
import { Row, Col } from 'antd';
import { Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Select } from 'antd';
import './OrderSearch.css'

const { Option } = Select;

class Name extends React.Component {
    constructor(){
        super();
        this.state={
            searchData:{
                orderId:'',   //订单ID
                orderState:'',   //订单状态
                goodsId:'',   //商品ID
                goodsName:'',   //商品名
                userName:'',   //收货人姓名
                userTel:'',   //收货人手机
            }
        }
    }
    //改变state
    onchangeSth=(itName,changeValue)=>{
        let newDate = Object.assign(this.state.searchData,{[itName]:changeValue});
        this.setState({
            searchData: newDate
        });
    };
    //输入框的值发生改变
    changeIt=(itName)=>{
        return (e)=>{
            this.onchangeSth(itName,e.target.value);
        };
    };

    //选择器的值发生变化时
    changeSelect=(value)=>{
        this.onchangeSth('orderState',value);
    };

    //点击提交
    submitSearch=()=>{
        //改变父组件的state
        this.props.changeState(this.state.searchData);
        this.props.reqData();
    };
    render() {
        let {orderId,orderState,goodsId,goodsName,userName,userTel} = this.state;

        return (
            <div className='OrderSearchDiv'>
                <h2>查找订单</h2>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                    <Col className="gutter-row" span={8}>
                        <table>
                            <tbody>
                                <tr>
                                    <td>订单ID：</td>
                                    <td>
                                        <input value={orderId} type="text" placeholder='请输入订单ID' onChange={this.changeIt('orderId')}/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>订单状态：</td>
                                    <td>
                                        <Select defaultValue="" style={{width:'95%',height:'30px'}} allowClear value={orderState} onChange={this.changeSelect}>
                                            <Option value="待发货">待发货</Option>
                                            <Option value="已发货">已发货</Option>
                                            <Option value="待收货">待收货</Option>
                                            <Option value="已收货">已收货</Option>
                                        </Select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </Col>
                    <Col className="gutter-row" span={8}>
                        <table>
                            <tbody>
                            <tr>
                                <td>商品名称：</td>
                                <td>
                                    <input type="text" value={goodsName} placeholder='请输入商品名称' onChange={this.changeIt('goodsName')}/>
                                </td>
                            </tr>
                            <tr>
                                <td>商品ID：</td>
                                <td>
                                    <input type="text" value={goodsId} placeholder='请输入商品ID' onChange={this.changeIt('goodsId')}/>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </Col>
                    <Col className="gutter-row" span={8}>
                        <table>
                            <tbody>
                                <tr>
                                    <td>收货人姓名：</td>
                                    <td>
                                        <input type="text" value={userName} placeholder='请输入收货人姓名' onChange={this.changeIt('userName')}/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>收货人手机号：</td>
                                    <td>
                                        <input type="text" value={userTel} placeholder='请输入收货人手机号' onChange={this.changeIt('userTel')}/>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </Col>
                </Row>
                <div className='btnBox'>
                    <Button type="primary" icon={<SearchOutlined />} onClick={this.submitSearch}>搜索</Button>
                </div>
            </div>
        );
    }
}

export default Name;